<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气天知道</title>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./common.css">
</head>
<body>

    <div class="wrap" id="app">
        <div class="box">
            <div class="logo">
                <img src="./img/logo.png" alt="">
            </div>
            <div class="search">
                <input type="text" v-model="city" @keyup.enter="searchCity" placeholder="请输入你要查询的城市">
                <button @click="searchCity">搜索</button>
            </div>
            <div class="hotkey" >
                <!-- <a href="#" @click="search('北京')" >北京</a>
                <a href="#" @click="search('上海')">上海</a>
                <a href="#" @click="search('广东')">广东</a>
                <a href="javascript:;" @click="search('深圳')">深圳</a> -->
                <a href="javascript:;" v-for="item in hotlist" @click="search(item)">{{item}}</a>
            </div>
        </div>
        <div class="weather_list">
            <ul class="list_info">
                <li class="info" v-for="item in weatherlist">
                    <div class="info_type">{{item.type}}</div>
                    <div class="info_temp">
                        <b>{{item.low}}</b>
                        ~
                        <b>{{item.high}}</b>
                    </div>
                    <div class="info_date">{{item.date}}</div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 导入 axios在线地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!--vue.js 开发版本环境 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./index.js"></script>
    
</body>
</html>